<template>
  <el-dialog title="物流" v-model="visible" width="30%" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
    <el-form ref="formRef" :model="trackData.form" label-position="left" :status-icon="true" :show-message="false">
      <el-form-item prop="trackingNumber" required>
        <el-input class="third_input" v-model="trackData.form.trackingNumber" placeholder="请填写物流单号 "></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <Button label="取消" @click="onCancelClick" />
      <Button label="确定" type="primary" @click="onSubmitClick" />
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, computed, nextTick } from 'vue'
import Button from '@/components/button/button.vue'
const emit = defineEmits(['update:visible', 'change'])
const props = defineProps(['visible'])

const visible = computed({
  get: () => {
    return props.visible
  },
  set: (value) => emit('update:visible', value)
})

const trackData = reactive({
  form: {}
})

let formRef = ref()

const hide = () => {
  visible.value = false
  nextTick(() => {
    formRef.value.clearValidate()
    formRef.value.resetFields()
  })
}

const onCancelClick = () => {
  hide()
}

const onSubmitClick = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      emit('change', trackData.form.trackingNumber)
      hide()
    }
  })
}
</script>
